<template>
<div>
    <h1>App根组件</h1>
    <a href="#/home">Home组件</a>
    <a href="#/movie">Movie组件</a>
    <a href="#/about">About组件</a>
    <hr>
    <component :is="comName"></component>
</div>
</template>

<script>
import MyAbout from "./MyAbout.vue";
import MyHome from "./MyHome.vue";
import MyMovie from "./MyMovie.vue";
export default{
    name:'MyApp',
    data(){
        return{
            comName:'MyHome',
        }
    },
    created() {
        // 监听hash值变化的事件
        window.onhashchange=()=>{
            // 通过location.hash获取到最新的hash值，并进行匹配
            switch(location.hash){
                case '#/home':
                    this.comName='MyHome';
                    break;
                case '#/movie':
                    this.comName='MyMovie';
                    break;
                case '#/about':
                    this.comName='MyAbout';
                    break;    
            }
        }
    },
    components:{
        MyHome,
        MyMovie,
        MyAbout,
    }
}
</script>

<style lang="less" scoped>
a{
    margin-left: 10px;
}
</style>